<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>宝贝搜索</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<!-- 项目前置 -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/myPagination.css">


<script src="js/myPagination.js" charset="UTF-8"></script>

<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<!-- 项目前置 -->
<script src="js/category.js" charset="UTF-8"></script>
<script type="text/javascript">
	
</script>
</head>

<body>
	<%@include file="top.jsp"%>
	<div class="content inner">
		<section class="filter-section clearfix">
		<ol class="breadcrumb">
			<li><a href="index.jsp">首页</a></li>
			<li class="active">商品筛选</li>
		</ol>
		<div class="filter-box">
			<div class="all-filter">
				<div class="filter-value">
					<div class="filter-title">
						选择商品分类 <i class="iconfont icon-down"></i>
					</div>
					<!-- 全部大分类 -->
					<ul class="catelist-card">
						<a href="javascript:void(0)" onclick="query('sex','0')"><li
							class="active">全部分类</li></a>
						<a href="javascript:void(0)" onclick="query('sex','女装')"><li>女装</li></a>
						<a href="javascript:void(0)" onclick="query('sex','男装')"><li>男装</li></a>
					</ul>
					<!-- 已选选项 -->
					<div class="ul_filter">
						<span class="pull-left" id="show_sex" style="display: none">
							<font id="show_sex_font">男装</font> <a href="javascript:void(0);"
							class="close" onclick="deleteshow('sex')">&times;</a>
						</span> <span class="pull-left" id="show_type" style="display: none">
							<font id="show_type_font">下装</font> <a href="javascript:void(0);"
							class="close" onclick="deleteshow('type')">&times;</a>
						</span> <span class="pull-left" id="show_color" style="display: none">
							<font id="show_color_font">红色</font> <a
							href="javascript:void(0);" class="close"
							onclick="deleteshow('color')">&times;</a>
						</span> <span class="pull-left" id="show_size" style="display: none">
							<font id="show_size_font">XXL</font> <a
							href="javascript:void(0);" class="close"
							onclick="deleteshow('size')">&times;</a>
						</span> <span class="pull-left" id="show_price" style="display: none">
							<font id="show_price_font">50</font> <a
							href="javascript:void(0);" class="close"
							onclick="deleteshow('price')">&times;</a>
						</span>
					</div>
					<a class="reset pull-right" href="javascript:void(0)"
						onclick="deleteall()">重置</a>
				</div>
			</div>
			<div class="filter-prop-item">
				<span class="filter-prop-title">分类：</span>
				<ul class="clearfix">
					<a href="javascript:void(0)" onclick="query('type','0')"><li
						class="active">全部</li></a>
					<a href="javascript:void(0)" onclick="query('type','上装')"><li>上装</li></a>
					<a href="javascript:void(0)" onclick="query('type','下装')"><li>下装</li></a>
					<a href="javascript:void(0)" onclick="query('type','裙装')"><li>裙装</li></a>
				</ul>
			</div>
			<div class="filter-prop-item">
				<span class="filter-prop-title">类型：</span>
				<ul class="clearfix">
					<a href="javascript:void(0)" onclick="query('type','0')"><li
						class="active">全部</li></a>
					<a href="javascript:void(0)" onclick="query('type','上装')"><li>上装</li></a>
					<a href="javascript:void(0)" onclick="query('type','下装')"><li>下装</li></a>
					<a href="javascript:void(0)" onclick="query('type','裙装')"><li>裙装</li></a>
				</ul>
			</div>
			<div class="filter-prop-item">
				<span class="filter-prop-title">颜色：</span>
				<ul class="clearfix">
					<a href="javascript:void(0)" onclick="query('color','0')"><li
						class="active">全部</li></a>
					<a href="javascript:void(0)" onclick="query('color','红色')"><li>红色</li></a>
					<a href="javascript:void(0)" onclick="query('color','粉红')"><li>粉红</li></a>
					<a href="javascript:void(0)" onclick="query('color','蓝色')"><li>蓝色</li></a>
					<a href="javascript:void(0)" onclick="query('color','白色')"><li>白色</li></a>
					<a href="javascript:void(0)" onclick="query('color','黑色')"><li>黑色</li></a>
					<a href="javascript:void(0)" onclick="query('color','黄色')"><li>黄色</li></a>
					<a href="javascript:void(0)" onclick="query('color','紫色')"><li>紫色</li></a>
				</ul>
			</div>
			<div class="filter-prop-item">
				<span class="filter-prop-title">尺寸：</span>
				<ul class="clearfix">
					<a href="javascript:void(0)" onclick="query('size','0')"><li
						class="active">全部</li></a>
					<a href="javascript:void(0)" onclick="query('size','L')"><li>L</li></a>
					<a href="javascript:void(0)" onclick="query('size','M')"><li>M</li></a>
					<a href="javascript:void(0)" onclick="query('size','S')"><li>S</li></a>
					<a href="javascript:void(0)" onclick="query('size','X')"><li>X</li></a>
					<a href="javascript:void(0)" onclick="query('size','XL')"><li>XL</li></a>
					<a href="javascript:void(0)" onclick="query('size','XXL')"><li>XXL</li></a>
					<a href="javascript:void(0)" onclick="query('size','XXXL')"><li>XXXL</li></a>
				</ul>
			</div>
			<div class="filter-prop-item">
				<span class="filter-prop-title">价格：</span>
				<ul class="clearfix">
					<a href="javascript:void(0)" onclick="queryprice(-1,-1)"><li
						class="active">全部</li></a>
					<a href="javascript:void(0)" onclick="queryprice(0,20)"><li>0-20</li></a>
					<a href="javascript:void(0)" onclick="queryprice(20,40)"><li>20-40</li></a>
					<a href="javascript:void(0)" onclick="queryprice(40,80)"><li>40-80</li></a>
					<a href="javascript:void(0)" onclick="queryprice(80,100)"><li>80-100</li></a>
					<a href="javascript:void(0)" onclick="queryprice(100,150)"><li>100-150</li></a>
					<a href="javascript:void(0)" onclick="queryprice(150,100000)"><li>150以上</li></a>
					<form class="price-order">
						<input type="text" id="price_min"> <span class="cc">-</span>
						<input type="text" id="price_max"> <input type="button"
							value="确定" onclick="queryprice(-2,-2)">
					</form>
				</ul>
			</div>

		</div>


		<div class="sort-box bgf5">
			<div class="sort-text">排序：</div>
			<a href="javascript:void(0)" onclick="downup('xl')"><div
					class="sort-text">
					销量 <i class="iconfont icon-sortDown" id="iddownxl"
						style="display: none"></i> <i class="iconfont icon-sortUp"
						id="idupxl"></i>
				</div></a> <a href="javascript:void(0)" onclick="downup('jg')"><div
					class="sort-text">
					价格 <i class="iconfont icon-sortDown" id="iddownjg"
						style="display: none"></i> <i class="iconfont icon-sortUp"
						id="idupjg"></i>
				</div></a>
			<div class="sort-total pull-right" id="cate_sumshop">共${catelistsnum }个商品</div>
		</div>

		</section>
		<section class="item-show__div clearfix"> <%-- 	<div id="content">
			<div id="disappare1" style="display: none;">
				<h1 style="margin-top: 1px;">添加成功</h1>

			</div>
		</div>
		<div id="content">
			<div id="disappare2" style="display: none;">
				<h1 style="margin-top: 1px;">添加失败</h1>
			</div>
		</div>
--%>



		<div class="pull-left">

			<div class="item-list__area clearfix" id="catelistsdiv">

				<input type="text" style="display: none"
					value="共${catelistsnum }个商品" id="cate_dis" /> <input type="text"
					style="display: none" value="${catepagesum }" id="cate_dis2" /> <input
					type="text" style="display: none" value="${catelistsnum }"
					id="cate_dis3" />

				<c:forEach items="${catelists }" var="c" varStatus="status">
					<div class="item-card" id="catelists${c.ccid }">
						<a href="ToItemShowServlet?temp=one&ccid=${c.ccid}" class="photo"> <img
							src="images/temp/${cate_img[status.index] }" alt="${c.cname }"
							class="cover">
							<div class="name">${c.cname }</div>
						</a>
						<div class="middle">
							<div class="price">
								<small>￥</small>${c.cprice }
							</div>
							<div class="sale">
								<a href="javascript:void(0)" onclick="addshop(${c.cid},1)">加入购物车</a>
							</div>
						</div>
						<div class="buttom">
							<div>
								销量 <b>${c.csales }</b>
							</div>
							<div>
								人气 <b>888</b>
							</div>
							<div>
								评论 <b>1688</b>
							</div>
						</div>
					</div>
				</c:forEach>

			</div>
			<!-- 分页 -->
			<div class="page text-right clearfix">
				<%-- <a href="javascript:void(0)" class="disabled" onclick="pageup()">上一页</a>
				<a href="javascript:void(0)" class="select" id="page1"
					onclick="pagenum(1)" style="display: inline">1</a> <a
					href="javascript:void(0)" class="disabled" id="page2"
					onclick="pagenum(2)" style="display: inline">2</a> <a
					href="javascript:void(0)" class="disabled" id="page3"
					onclick="pagenum(3)" style="display: inline">3</a> <a
					href="javascript:void(0)" class="disabled" id="page4"
					onclick="pagenum(4)" style="display: inline">4</a> <a
					href="javascript:void(0)" class="disabled" id="page5"
					onclick="pagenum(5)" style="display: inline">5</a> <a
					href="javascript:void(0)" class="disabled" onclick="pagedown()">下一页</a>
				<a href="javascript:void(0)" class="disabled"><span
					id="pagespan1">1</span>/<span id="pagespan1">5</span>页</a>
			--%>
				<div class="page-order">
					<%-- 	到第 <input type="text" name="page" id="jumppage"> 页 <input
						class="sub" type="button" value="确定" id="jumppageok">
			--%>
				</div>

			</div>
			<c:if test="${user!=null }">
				<div class="pagination" id="pagination"></div>
			</c:if>
			<script>
				window.onload = function() {
					new myPagination({
						id : 'pagination',
						curPage : 1,//初始页码
						pageTotal : $('#cate_dis2').val(),//总页数
						pageAmount : 25, //每页多少条
						dataTotal : $('#cate_dis3').val(),//总共多少条数据
						pageSize : 5,//可选，分页个数
						showPageTotalFlag : false,//是否显示数据统计
						showSkipInputFlag : true, //是否支持跳转
						getPage : function(page) {
							//获取当前页
							$.ajax({
								url : "CategoryServlet?flag=page&cate_page="
										+ page,
								type : "post",
								data : {},
								success : function(data) {
									if (data != null) {
										$('#catelistsdiv').html(data);
										$('#cate_sumshop').html(
												$('#cate_dis').val());
									}
								},
								error : function(data) {

								}
							});

						}
					});
				}
			</script>
		</div>
		<%-- <div class="pull-right">

			<div class="desc-segments__content">
				<div class="lace-title">
					<span class="c6">爆款推荐</span>
				</div>
				<div class="picked-box">

					<a href="javascript:void(0)" class="picked-item"><img
						src="images/temp/S-001.jpg" alt="" class="cover"><span
						class="look_price"></span></a>
				</div>
			</div>
		</div>--%> </section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item"><a href="udai_welcome.html"
				class="r-item-hd"> <i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">用户中心</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="ShopCartServlet?flag=index"
				class="r-item-hd"> <i class="iconfont icon-cart"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">购物车</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="udai_collection.html"
				class="r-item-hd"> <i class="iconfont icon-aixin"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">我的收藏</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="javascript:void(0)"
				class="r-item-hd"> <i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">联系客服</span>
					</div>
			</a></li>
			<li class="r-toolbar-item"><a href="issues.html"
				class="r-item-hd"> <i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box">
						<span class="r-tip-text">留言反馈</span>
					</div>
			</a></li>
			<li class="r-toolbar-item to-top"><i class="iconfont icon-top"></i>
				<div class="r-tip__box">
					<span class="r-tip-text">返回顶部</span>
				</div></li>
		</ul>
		<script>
			$(document).ready(function() {
				$('.to-top').toTop({
					position : false
				})
			});
		</script>
	</div>

	</div>
	<%@include file="bottom.jsp"%>
</body>
</html>
